// 获取投稿按钮和模态框
const uploadBtn = document.getElementById('uploadBtn');
const uploadModal = document.getElementById('uploadModal');
const closeBtn = document.querySelector('.close-btn');

// 打开投稿模态框
uploadBtn.addEventListener('click', function () {
    uploadModal.style.display = 'flex';
    document.body.style.overflow = 'hidden'; // 防止背景滚动
});

// 关闭投稿模态框
closeBtn.addEventListener('click', function () {
    uploadModal.style.display = 'none';
    document.body.style.overflow = 'auto'; // 恢复滚动
});

// 点击模态框外部关闭
window.addEventListener('click', function (event) {
    if (event.target === uploadModal) {
        uploadModal.style.display = 'none';
        document.body.style.overflow = 'auto'; // 恢复滚动
    }
});

// 文件上传区域交互效果
const fileUploads = document.querySelectorAll('.file-upload');
fileUploads.forEach(upload => {
    upload.addEventListener('dragover', function (e) {
        e.preventDefault();
        this.style.borderColor = '#00A1D6';
        this.style.backgroundColor = 'rgba(0, 161, 214, 0.1)';
    });

    upload.addEventListener('dragleave', function () {
        this.style.borderColor = '';
        this.style.backgroundColor = '';
    });

    upload.addEventListener('drop', function (e) {
        e.preventDefault();
        this.style.borderColor = '';
        this.style.backgroundColor = '';

        if (e.dataTransfer.files.length) {
            // 这里处理文件上传逻辑
            this.innerHTML = `<i class="fas fa-check-circle" style="color:#4CAF50;"></i>
                                      <p>${e.dataTransfer.files[0].name}</p>
                                      <p class="small" style="color:#4CAF50;">上传成功</p>`;
        }
    });

    upload.addEventListener('click', function () {
        // 模拟文件选择器
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = this.id === 'videoUpload' ? 'video/*' : 'image/*';
        input.click();

        input.addEventListener('change', function () {
            if (this.files.length) {
                upload.innerHTML = `<i class="fas fa-check-circle" style="color:#4CAF50;"></i>
                                          <p>${this.files[0].name}</p>
                                          <p class="small" style="color:#4CAF50;">上传成功</p>`;
            }
        });
    });
});

// 添加导航项点击效果
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
    item.addEventListener('click', function (e) {
        //e.preventDefault();
        navItems.forEach(nav => nav.classList.remove('active'));
        this.classList.add('active');

        // 更新页面标题
        const title = this.querySelector('span').textContent;
        document.querySelector('.section-title').innerHTML =
            `<i class="${this.querySelector('i').className}"></i> ${title}`;
    });
});

// 评论操作功能
document.querySelectorAll('.comment-action').forEach(action => {
    action.addEventListener('click', function () {
        const actionType = this.querySelector('i').className;
        const commentItem = this.closest('.comment-item');
        const userName = commentItem.querySelector('.user-name').textContent;

        if (actionType.includes('fa-trash-alt')) {
            if (confirm(`确定要删除 ${userName} 的评论吗？`)) {
                commentItem.style.opacity = '0.5';
                setTimeout(() => {
                    commentItem.style.display = 'none';
                }, 300);
            }
        } else if (actionType.includes('fa-reply')) {
            const commentContent = commentItem.querySelector('.comment-content').textContent;
            alert(`回复 ${userName} 的评论: "${commentContent}"`);
        } else if (actionType.includes('fa-heart') || actionType.includes('fa-star')) {
            this.style.color = '#FB7299';
            this.querySelector('i').className = actionType.includes('fa-heart')
                ? 'fas fa-heart'
                : 'fas fa-star';
            alert(`已将 ${userName} 的评论标记为精选`);
        }
    });
});